<template>
	<view>
		<!-- 个人信息 -->
		<view class="card">
			<view style="height: 70rpx;"></view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="4"> 姓名:</uni-col>
					<uni-col :span="4"> {{user.name}}</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="4">学号:</uni-col>
					<uni-col :span="8"> {{user.id}}</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="4">专业:</uni-col>
					<uni-col :span="10"> {{user.fac}}&nbsp;{{user.major}}</uni-col>
				</uni-row>
			</view>
		</view>
		<!-- 消息标题栏 -->
		<view class="message-title">
			<image class="icon" src="../../static/message.png"></image>
			<text style="width: 100rpx;">消息</text>
			<view class="seperation" style="margin:0rpx 20rpx;"></view>
		</view>
		<!-- 消息列表 -->
		<view v-for="(m, i) in messageList" :key="i">
			<view class="time">
				{{transferTime(m.apply_time)}}
			</view>
			<view class="message">

				<view class="message-type">
					<view class="status">
						<image class="status-image"
							:src="m.apply_status=='f'?'../../static/fail.png':'../../static/pass.png'"></image>
						<text>{{m.apply_status=='f'?'驳回':'通过'}}</text>
					</view>

					<text class="message-type-text">
						{{m.type}}
					</text>
				</view>

				<view>您的{{m.type}}审批{{m.apply_status=='f'?'被驳回':'已通过'}}</view>

				<view class="seperation"></view>
				<view class="view-detail" @click='gotoApplyDetails(m.apply_id)'>
					<text>查看详情</text>
					<text>></text>
				</view>
			</view>
		</view>
		<view @click="goTo('../../subpkgs/my/aboutUs/aboutUs')" class="about-us">关于花狮评</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				user: {
					name: "",
					id: uni.getStorageSync("user_id"),
					fac: "",
					major: ""
				},
				messageList: []
			}
		},
		onShow() {
			const API_BASE_URL = this.$ProjectConfig.API_BASE_URL;
			const that = this;
			//发起网络请求
			wx.request({
				url: API_BASE_URL + '/user/userInfo',
				header: {
					'Content-Type': 'application/json',
				},
				data: {
					user_id: uni.getStorageSync("user_id")
				},
				method: 'GET',
				success: function(res) {
					console.log(res);
					that.user.name = res.data.name;
					that.user.fac = res.data.faculty;
					that.user.major = res.data.major;
				}
			});
			wx.request({
				url: API_BASE_URL + '/apply/getAllApply',
				header: {
					'Content-Type': 'application/json',
				},
				data: {
					user_id: uni.getStorageSync("user_id")
				},
				method: 'GET',
				success: function(res) {
					var temp=res.data;
					for(var t of temp){
						if(t.type=='study') t.type='学业成绩'
						else if(t.type == 'academic') t.type='学术竞赛'
						else if(t.type == 'general') t.type='综合素质'
					}
					
					that.messageList=temp;
				}
			});
		},
		computed: {
			goTo: function() {
				return function(url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			transferTime: function() {
				return function(str) {
					var arr=str.split(" ");
					var monthTable=[
						"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"
					]
					var day=arr[1];
					var month=monthTable.indexOf(arr[2])+1;
					var year=arr[3];
					var time=arr[4];
					return year+"-"+month+"-"+day+" "+time;
				}
			},
		},
		methods: {
			gotoApplyDetails(id){
							uni.navigateTo({
								url: "../../subpkgs/my/app_details/app_details?apply_id="+JSON.stringify(id)
							})
						}
		}
	}
</script>

<style lang="scss">
.card {
  margin: 0rpx 20rpx;
  width: calc(100% - 40rpx); /* 用 calc() 函数计算宽度，减去两倍的 margin 大小 */
  border-radius: 10rpx;
  height: auto;
  background-image: url("../../static/studentCard.png"); /* Updated to url() */
  background-size: cover; 
  min-height: 340rpx;
  color:#FFF;
  font-size: $uni-font-size-base;
}
.row{
	margin:20rpx;
}
.message-title{
	display: flex;
	flex-direction: row;
	align-items: center;
	width:100%;
}
.icon{
	width:48rpx;
	height:48rpx;
	margin:20rpx;
}
.seperation{
	background-color: #CCC;
	width:100%;
	height:1rpx;
	margin:20rpx 0rpx;
}
.time{
	font-size: $uni-font-size-base;
	color: #AAA;
	text-align: center;
	margin:10rpx 0rpx;
}
.message{
	margin: 20rpx;
	width: calc(100% - 80rpx); /* 用 calc() 函数计算宽度，减去两倍的 margin 大小 */
	border-radius: 10rpx;
	box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2); 
	height:auto;
	padding:10rpx 20rpx;
	font-size: $uni-font-size-base;
	border: #AAA 1rpx;
}
.message-type{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width:100%;
}
.status{
	width:20%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.status-image{
	width:48rpx;
	height:48rpx;
}
.message-type-text{
	color: #FFF;
	background-color: #e67369;
	width:120rpx;
	padding:10rpx;
	border-radius: 20rpx;
	margin:10rpx 0rpx;
}
.view-detail{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width:100%;
}
.about-us{
	font-size: $uni-font-size-base;
	color: #CCC;
	text-align: center;
}
</style>